<template>
  <el-tooltip
    v-bind="$attrs"
    v-on="$listeners"
    :popper-class="appTheme"
    effect="light"
    :disabled="disabled"
  >
    <template #content>
      <slot name="content"></slot>
    </template>
    <slot></slot>
  </el-tooltip>
</template>
<script>
export default {
  inheritAttrs: false,
  name: "Tooltip",
  computed: {
    appTheme() {
      return this.$store.state.settings.appTheme;
    },
    disabled() {
      if (
        this.$attrs.content == "" ||
        this.$attrs.content == "--" ||
        this.$attrs.content == "null" ||
        this.$attrs.content == "undefined"
      ) {
        return true;
      }
      return false;
    },
  },
};
</script>
<style lang="scss">
@import "@/style/variables.scss";
.el-tooltip__popper.theme-dark {
  background-color: #fff !important;
  border-color: #eee !important;
  color: #fff !important;
}
.el-tooltip__popper.theme-dark[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: #eee !important;
  &::after {
    border-bottom-color: #eee !important;
  }
}
</style>
